<template>
  <div class="container">
    <div class="banner">
      <img class="logo" src=".././assets/logo.png"/>
      <label class="title">优能EnableU组织及人才发展</label>
    </div>
    <div class="menu">
     <!--  <img class="hamburger"/> -->
      <input class="search"/>
     <!--  <label class="login">登录</label>
      <label class="divider">｜</label>
      <label class="signup">注册</label> -->
      
      <el-button v-if="this.$store.state.token==''" index="" @click="loginFormVisible = true" type="text">登录</el-button>

      <el-button v-if="this.$store.state.token==''" index="" @click="registerFormVisible = true" type="text">注册</el-button>
      
      <el-menu :default-active="activeIndex" class="el-menu-demo " :router="true" mode="horizontal"
                 @select="handleSelect">
       <!--  <el-menu-item  v-if="this.$store.state.token==''" index="" class=""
                          @click="loginFormVisible = true">
              <el-button type="text">登录</el-button>
            </el-menu-item>

            <el-menu-item  v-if="this.$store.state.token==''" index="" class=""
                          @click="registerFormVisible = true">
              <el-button type="text">注册</el-button>
            </el-menu-item> -->

            <el-dialog title="登录" :visible.sync="loginFormVisible" width="100%">
              <el-form :model="form">
                <el-form-item :label-width="formLabelWidth">
                  <el-input v-model="form.loginName" placeholder="用户名" prefixIcon="el-icon-user-solid"/>
                </el-form-item>
                <el-form-item :label-width="formLabelWidth">
                  <el-input v-model="form.loginPwd" placeholder="密码" :show-password="form.loginShowPwd"
                            @keyup.enter.native="userLogin" prefixIcon="el-icon-lock"/>
                </el-form-item>
                <el-button @click="userLogin">登录&nbsp;&nbsp;<i class="el-icon-check"></i></el-button>
                <router-link to="/forgetPwd">
                  <el-button @click="loginFormVisible = false">忘记密码&nbsp;&nbsp;<i class="el-icon-right"></i></el-button>
                </router-link>
              </el-form>
            </el-dialog>

            <el-dialog title="注册" :visible.sync="registerFormVisible" width="80%">

              <el-form :model="form">
                <el-form-item :label-width="formLabelWidth">
                  <el-input v-model="form.registerName" placeholder="用户名" prefixIcon="el-icon-user-solid"/>
                </el-form-item>
                <el-form-item :label-width="formLabelWidth">
                  <el-input v-model="form.registerPwd" placeholder="密码" :show-password="form.loginShowPwd"
                            prefixIcon="el-icon-lock"/>
                </el-form-item>

                <el-form-item :label-width="formLabelWidth">
                  <el-input v-model="form.registerConfirmPwd" placeholder="确认密码" :show-password="form.loginShowPwd"
                            prefixIcon="el-icon-bell"/>
                </el-form-item>


                <!--<el-form-item :label-width="formLabelWidth">
                  <el-input v-model="form.registerInviteCode" placeholder="邀请码" prefixIcon="el-icon-s-promotion"/>
                </el-form-item>
                 <el-form-item :label-width="formLabelWidth">
                  <el-input v-model="form.registerMail" placeholder="邮箱" prefixIcon="el-icon-message"/>
                </el-form-item>
                <el-form-item :label-width="formLabelWidth">
                  <el-input v-model="form.registerMailCode" placeholder="邮箱验证码" prefixIcon="el-icon-key"/>
                </el-form-item>
                <el-button @click="sendMail">
                  发送验证码&nbsp;&nbsp;
                  <i class="el-icon-coffee-cup" v-if="!sendMailFlag"/>
                  <i class="el-icon-loading" v-if="sendMailFlag"/>
                </el-button> -->
                <el-button @click="userRegister">注册&nbsp;&nbsp;<i class="el-icon-check"></i></el-button>
              </el-form>
            </el-dialog>


            <el-submenu class = "loginedMenu" index="4" v-if="this.$store.state.token!==''" :router="true">
              <template slot="title">[&nbsp;&nbsp;{{this.$store.state.name}}&nbsp;&nbsp;]</template>

              <el-menu-item route="/newBlog" index="4-1">&nbsp;&nbsp;&nbsp;
                <i class="el-icon-edit"></i>
                写文章
              </el-menu-item>
              <el-menu-item route="/myBlog" index="4-3">&nbsp;&nbsp;&nbsp;
                <i class="el-icon-s-home"></i>
                我的文章
              </el-menu-item>
              <el-menu-item route="/account" index="4-2">&nbsp;&nbsp;&nbsp;
                <i class="el-icon-s-tools"></i>
                账号设置
              </el-menu-item>


              <el-menu-item route="/admins/userManage" index="4-4" v-if="this.$store.state.roles.indexOf('ADMIN') > -1">
                &nbsp;&nbsp;&nbsp;
                <i class="el-icon-loading"></i>管理后台
              </el-menu-item>

              <el-menu-item @click="logout">&nbsp;&nbsp;&nbsp;
                <i class="el-icon-switch-button"/>退出登录
              </el-menu-item>
            </el-submenu>

        </el-menu>
    </div>
    <div class="cover">
      <img class="cover-image" src=".././assets/cover.jpg"/>
    </div>
    <div class="selections">
      <a target="_blank" style="text-decoration: none;" href="https://mp.weixin.qq.com/s/09jCMW1Epde3wF1rHxRPeA">
        <div class="selection-container">
          <img class="selection" src=".././assets/1.png"/>
          <label class="selection-text">优能介绍</label>
        </div>
      </a>
      <a target="_blank" style="text-decoration: none;" href="https://mp.weixin.qq.com/s/Tf72GBaRatuWAKjyDDoLyw">
        <div class="selection-container">
          <img class="selection" src=".././assets/2.png"/>
          <label class="selection-text">专家介绍</label>
        </div>
      </a>
      <a target="_blank" style="text-decoration: none;" href="https://pan.baidu.com/s/1t1syO-UFzKJErQeINH5udA#list/path=%2F" >
        <div class="selection-container">
          <img class="selection" src=".././assets/3.png"/>
          <label class="selection-text">好友专享</label>
        </div>
      </a>
      <a target="_blank" style="text-decoration: none;" href="https://mp.weixin.qq.com/s/U-IhMzUrws__a7CLRuzopw">
        <div class="selection-container">
          <img class="selection" src=".././assets/4.png"/>
          <label class="selection-text">合作联系</label>
        </div>
      </a>
    </div>

    <div class="article" v-for="blog in hotBlog" @click="router(blog.id)">
      <img class="article-image"  src=".././assets/001.jpg"/>
      <label class="article-title">{{blog.title}}</label>
    </div>

    <div class="isbn">
      <label>沪ICP备19027922号-1</label>
    </div>
  </div>
</template>

<script>
import blog from '@/api/blog'
import user from '@/api/user'
import '../rem'

export default {
  name: 'index2',
  data() {
    return {
      hotBlog: [],searchTxt: '',//搜索框
        activeIndex: '1',//默认选中第一项->首页
        loginFormVisible: false,//登录框
        registerFormVisible: false,//注册框
        form: { //表单
          loginName: '',
          loginPwd: '',
          loginShowPwd: true, //登录是否显示密码
          registerName: '',//注册
          registerPwd: '',
          registerConfirmPwd: '',
          registerMail: 'enable@enab.com',
          registerMailCode: '111111',
          registerInviteCode: '123456'
        },
        formLabelWidth: '10px',
        sendMailFlag: false
    }
  },
  created() {
    blog.getHotBlog().then(responese => {
      this.hotBlog = responese.data;
    });
  },
  methods: {
    experts() {
      this.$router.push({ //路由跳转
        path: '/expertList'
      })
      document.documentElement.style.fontSize = ""
    },
    router(id) {
      scrollTo(0, 0);
      this.$router.push({ //路由跳转
        path: '/blog/'+id
      })
      document.documentElement.style.fontSize = ""
    },
    handleSelect(key, keyPath) {
//        console.log(key, keyPath);
        if (key != null && key !== '')
          this.activeIndex = key
      },
    userLogin() { //登录方法
        if (this.form.loginName.length <= 0 || this.form.loginPwd.length <= 0) {
          this.$message({
            message: '字段不完整',
            type: 'error'
          });
          return;
        }
        user.login(this.form.loginName, this.form.loginPwd).then(response => {
          this.form.loginPwd = ''
          this.$store.commit('login', response.data)//存储token
          this.$message({
            message: '登录成功',
            type: 'success'
          });
          this.loginFormVisible = false
        })
    },
    logout() {  //退出登录
        user.logout().then(res => {
          this.$store.commit('logout')//清除token等信息
          this.$message({
            message: '退出成功',
            type: 'success'
          });
          this.$router.push({ //路由跳转
            path: '/'
          })
        })

      },
      sendMail() {//发送邮件

        var reg = new RegExp(/^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/);
        if (!reg.test(this.form.registerMail)) {//检测字符串是否符合正则表达式
          this.$message({
            message: '邮箱格式不正确',
            type: 'error'
          });
          return;
        }
        this.sendMailFlag = true;
        user.sendMail(this.form.registerMail).then(res => {
          this.$message({
            message: '发送成功',
            type: 'success'
          });
          this.sendMailFlag = false;
        }).catch(() => {
          this.sendMailFlag = false;
        })
      },
      userRegister() {//用户注册
        //判断是否输入字段
        if (this.form.registerName.length <= 0 || this.form.registerPwd.length <= 0 || this.form.registerConfirmPwd.length <= 0 //||
          // this.form.registerMail.length <= 0 || this.form.registerMailCode.length <= 0 || this.form.registerInviteCode.length <= 0
          ) {
          this.$message({
            message: '字段不符合规范',
            type: 'error'
          });
          return;
        }
        if (this.form.registerPwd !== this.form.registerConfirmPwd) {
          this.$message({
            message: '两次密码不一致',
            type: 'error'
          });
          return;
        }
        if (this.form.registerPwd.length < 6) {
          this.$message({
            message: '密码长度需大于6位',
            type: 'error'
          });
          return;
        }
        var reg = new RegExp(/^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/);

        if (!reg.test(this.form.registerMail)) {//检测字符串是否符合正则表达式
          this.$message({
            message: '邮箱格式不正确',
            type: 'error'
          });
          return;
        }

        this.form.registerMail = this.form.registerName+"@enab.com"

        user.register(this.form.registerName, this.form.registerPwd, this.form.registerMail, this.form.registerMailCode, this.form.registerInviteCode).then(res => {
          this.$message({
            message: '注册成功',
            type: 'success'
          })
          this.registerFormVisible = false
        })

      },
      searchSubmit() {
        if (this.searchTxt.length <= 0)
          return;
        this.$router.push({ //路由跳转
          path: '/searchBlog/' + this.searchTxt
        })
        this.searchTxt = '';//清空搜索框
      }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
}

.banner {
  width: 23.4375rem;
  height: 3.6rem;
  display: flex;
}

.logo {
  margin-top: 0.36rem;
  margin-left: 0.8125rem;
  width: 2.75rem;
  height: 2.75rem;
}

.title {
  font-size: 1.14rem;
  align-self: center;
  margin-left: 0.9375rem;
}

.menu {
  width: 23.4375rem;
  height: 2.5rem;
  background: #2b2b2b;
  display: flex;
}

.hamburger {
  width: 1.21rem;
  height: 0.916rem;
  align-self: center;
  margin-left: 0.8125rem;
}

.search {
  width: 8.3rem;
  height: 1.31rem;
  align-self: center;
  border: none;
  margin-left: 6.875rem;
  margin-right: 0.9375rem;
}

.login {
  font-size: 0.25rem;
  color: white;
  align-self: center;
  margin-left: 0.21rem;
}

.divider {
  font-size: 0.25rem;
  color: white;
  align-self: center;
}

.signup {
  font-size: 0.25rem;
  color: white;
  align-self: center;
}

.cover {
  width: 23.4375rem;
  height: 7.3125rem;
}

.cover-image {
  width: 100%;
  height: 100%;
}

.selections {
  width: 19rem;
  height: 5.8125rem;
  display: flex;
  align-self: center;
  justify-content: space-between;
}

.selection-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.selection-text {
  margin-top: 0.4rem;
  font-size: 0.8rem;
}

.selection {
  width: 2.45rem;
  height: 2.45rem;
  margin-top: 1.11rem;
}

.article {
  width: 23.4375rem;
  height: 5.4rem;
  margin-bottom: 0.33rem;
  display: flex;
}

.article-image {
  width: 8.5rem;
  height: 5.4rem;
  margin-left: 0.8125rem;
}

.article-title {
  margin-left: 0.53rem;
  margin-top: 0.56rem;
  width: 12.34rem;
  font-size: 0.78rem;
}

.loginedMenu{
  width: 100%;
  height: 1.91rem;
  background: #2b2b2b;
  display:block;
}

.el-menu {
  background-color:#2b2b2b;
}

.el-menu--horizontal>.el-submenu .el-submenu__title {
  line-height: 1.91rem;
  color:#eee;
  height: 1.91rem;
}

.submenu__title:hover {
  background-color: #2b2b2b;
}

.isbn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
